<template>
<div>
     <el-select v-model="value" placeholder="请选择" @change="changeData">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      <div id="mountNode"></div>
</div>
</template>
<script>
import G6 from "@antv/g6/build/g6";
export default{
    data(){
        return{
            value:"default",
            options:[
                {value: 'default',label: '默认'},
                {value: 'addNode',label: '添加节点'},
                {value: 'addEdge',label: '添加边'}
            ],
            gData:{
                nodes: [{
                    id: 'node1',
                    x: 100,
                    y: 200
                },{
                    id: 'node2',
                    x: 300,
                    y: 200
                },{
                    id: 'node3',
                    x: 300,
                    y: 300
                }],
                edges: [{
                    id: 'edge1',
                    target: 'node2',
                    source: 'node1'
                }]
            },
            graph:null
        }
    },
    created(){
        
    },
    mounted(){
         this.$nextTick(() => {
            this.init();
            });
    },
    methods:{
        init(){
            //图实例化时，至少需要为图设置容器、宽、高：
            this.graph =new G6.Graph({
                container: 'mountNode',
                width: 500,
                height: 500,
                modes: {
                    default: ['drag-node', 'click-select'],
                    addNode: ['click-add-node', 'click-select'],
                    addEdge: ['click-add-edge', 'click-select']
                },
                defaultEdge: {
                    shape: 'polyline'
                }
            });
            //数据的加载和图的渲染是两个步骤，可以分开进行。
            this.graph.data(this.gData);  // 加载数据
            this.graph.render();        // 渲染
            this.bindEvent();
        },
        bindEvent(){
            G6.registerBehavior('click-add-edge', {
                getEvents() {
                    return {
                    'node:click': 'onClick',
                    mousemove: 'onMousemove',
                    'edge:click': 'onEdgeClick' // 点击空白处，取消边
                    };
                },
                onClick(ev) {
                    const node = ev.item;
                    const graph = this.graph;
                    const point = {
                    x: ev.x,
                    y: ev.y
                    };
                    const model = node.getModel();
                    if (this.addingEdge && this.edge) {
                    graph.updateItem(this.edge, {
                        target: model.id
                    });
                    // graph.setItemState(this.edge, 'selected', true);
                    this.edge = null;
                    this.addingEdge = false;
                    } else {
                    this.edge = graph.addItem('edge', {
                        source: model.id,
                        target: point
                    });
                    this.addingEdge = true;
                    }
                },
                onMousemove(ev) {
                    const point = {
                    x: ev.x,
                    y: ev.y
                    };
                    if (this.addingEdge && this.edge) {
                    this.graph.updateItem(this.edge, {
                        target: point
                    });
                    }
                },
                onEdgeClick(ev) {
                    const currentEdge = ev.item;
                    // 拖拽过程中，点击会点击到新增的边上
                    if (this.addingEdge && this.edge == currentEdge) {
                    graph.removeItem(this.edge);
                    this.edge = null;
                    this.addingEdge = false;
                    }
                }
            });

                // 封装点击添加边的交互
            G6.registerBehavior('click-add-node', {
                getEvents() {
                    return {
                    'canvas:click': 'onClick'
                    };
                },
                onClick(ev) {
                    const graph = this.graph;
                    const node = graph.addItem('node', {
                    x: ev.x,
                    y: ev.y,
                    id: G6.Util.uniqueId()
                    });
                    // graph.setItemState(node, 'selected', true);// 添加后默认选中
                }
            });

        },
        changeData(e){
            console.log(e);
            this.graph.setMode(e);
        }
    }
}
</script>
